
import React, { Component } from 'react';
import { NavBar } from 'antd-mobile'
import "../styles/Login.scss"
import * as service from "../api/index"


class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            phone: '',
            pass: ''
        };
    }
    handleChange(e) {
        this.setState({ [e.target.name]: e.target.value })
    }
    async login() {
        const res = await service.user_login({ loginname: this.state.phone, password: this.state.pass })
        console.log(res.data);


        if (res.data.code == 200) {
            localStorage.setItem('token', res.data.data.token)
            localStorage.setItem('userid', JSON.stringify(res.data.data.userid))
            localStorage.setItem('phone', this.state.phone)
            this.props.history.push('/index')
            alert(res.data.message)
        } else {
            alert(res.data.message)
            this.props.history.push('/login')
        }
    }


    render() {
        return (
            <div className='login'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }} ><p>登录</p></NavBar>
                </div>
                <div className="box" >
                    <div className='inps'>
                        <input type="text" name='phone'
                            placeholder='请输入用户名' value={this.state.phone} onChange={(e) => { this.handleChange(e) }} />
                    </div>
                    <div className='inps'>
                        <form>
                            <input type="Password" name='pass' placeholder='请输入密码' value={this.state.pass} onChange={(e) => { this.handleChange(e) }} />
                        </form>
                    </div>
                    <div className='bts' >
                        <span onClick={() => { this.login() }} >登录</span>
                    </div>
                </div>
                <p onClick={() => { this.props.history.push('/register') }}>手机快速注册</p>
            </div>
        );
    }
}

export default Login;